<!--
 * @页面名称:门类管理
 * @描述: 
 * @作者: 
 * @Date:
-->
<template>
  <div class="card categoryManage">
    <el-space>
      <el-button type="primary" :disabled="BtnStatue[0]" @click="add">新增</el-button>
      <el-button :disabled="BtnStatue[1]" @click="edit">编辑</el-button>
      <el-button type="danger" :disabled="BtnStatue[2]" @click="del">删除</el-button>
    </el-space>
    <div style="height: calc(100% - 42px); margin-top: 10px">
      <stable :columns="tableSetting.columns" :data="tableSetting.data" @rowClick="rowClick"></stable>
    </div>
    <!-- 新增修改弹框 -->
    <el-dialog v-model="dialogSetting.visible" :title="dialogSetting.title" width="30%" draggable>
      <el-form label-width="90px" :model="formData" :rules="rules" ref="formRef">
        <el-form-item label="顺序号:" prop="Order">
          <el-input v-model="formData.Order"></el-input>
        </el-form-item>
        <el-form-item label="门类代码:" prop="Code">
          <el-input v-model="formData.Code"></el-input>
        </el-form-item>
        <el-form-item label="门类名称:" prop="Name">
          <el-input v-model="formData.Name"></el-input>
        </el-form-item>
        <el-form-item label="备注:" prop="Remark">
          <el-input v-model="formData.Remark" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogSetting.visible = false">取消</el-button>
          <el-button type="primary" @click="handle"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import type { FormRules, FormInstance } from "element-plus";
import useCurrentInstance from "@/utils/useCurrentInstance";

const { proxy } = useCurrentInstance();
// 按钮状态
const BtnStatue = ref([false, true, true]);
// 表格配置
const tableSetting = reactive({
  columns: [
    { field: "Class_Order", title: "顺序号", sortable: true },
    { field: "Class_Code", title: "门类代码", sortable: true },
    { field: "Class_Name", title: "门类名称", sortable: true },
    { field: "Class_Remark", title: "备注", sortable: true }
  ],
  data: []
});
// 单击表格保存对象
const rowClickObj = ref();
// 弹出框配置
const dialogSetting = reactive({
  visible: false,
  title: "新增"
});
// 弹出框表单绑定字段
const formData = reactive({
  Order: null,
  Code: "",
  Name: "",
  Remark: ""
});
// 弹出框表单规则
const rules = reactive<FormRules>({
  Order: [{ required: true, message: "请填写顺序", trigger: "blur" }],
  Code: [{ required: true, message: "请填写门类代码", trigger: "blur" }],
  Name: [{ required: true, message: "请填写门类名称", trigger: "blur" }]
});
// 弹出框表单实例
const formRef = ref<FormInstance>();
// 获取门类数据
const getCatagoryData = () => {
  proxy.$vueAxios.get("Master_Base_Class/Get", { order: "Class_Order asc" }).then((res: any) => {
    tableSetting.data = res.List;
  });
};
// 表格单击事件
const rowClick = ({ row }: any) => {
  rowClickObj.value = row;
  BtnStatue.value[1] = false;
  BtnStatue.value[2] = false;
};
// 新增
const add = () => {
  dialogSetting.visible = true;
  dialogSetting.title = "新增";
  formRef.value?.resetFields();
};
// 修改
const edit = () => {
  dialogSetting.visible = true;
  dialogSetting.title = "修改";
  formData.Code = rowClickObj.value.Class_Code;
  formData.Name = rowClickObj.value.Class_Name;
  formData.Order = rowClickObj.value.Class_Order;
  formData.Remark = rowClickObj.value.Class_Remark;
};
// 删除
const del = () => {
  proxy.$messageBox
    .confirm("确定删除该数据？", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    })
    .then(() => {
      proxy.$vueAxios.post("Master_Base_Class/Delete", [rowClickObj.value.Class_ID]).then((res: any) => {
        if (res.Mark) {
          getCatagoryData();
          proxy.$message.success("删除成功");
        } else {
          proxy.$message.error("删除失败");
        }
      });
    })
    .catch(err => {
      console.log(err);

      proxy.$message("取消删除");
    });
};
// 新增修改确认事件
const handle = () => {
  formRef.value?.validate(isValid => {
    if (isValid) {
      if (dialogSetting.title === "新增") {
        proxy.$vueAxios
          .post("Master_Base_Class", {
            class_ID: proxy.$global.createID(),
            class_Code: formData.Code,
            class_Name: formData.Name,
            class_Order: formData.Order,
            class_Remark: formData.Remark
          })
          .then(() => {
            dialogSetting.visible = false;
            getCatagoryData();
          });
      } else {
        proxy.$vueAxios
          .put("Master_Base_Class", {
            class_ID: rowClickObj.value.Class_ID,
            class_Code: formData.Code,
            class_Name: formData.Name,
            class_Order: formData.Order,
            class_Remark: formData.Remark
          })
          .then(() => {
            dialogSetting.visible = false;
            getCatagoryData();
          });
      }
    }
  });
};
onMounted(() => {
  getCatagoryData();
});
</script>

<style scoped lang="scss">
.categoryManage {
  height: 100%;
}
</style>
